<template>
  <!-- 大页面 -->
  <div id="document">
    <!-- 版心 -->
    <div class="common">
      <!-- 头部标题 -->
      <div class="box">
        <div id="u423"></div>
        <p>居民管理</p>
      </div>

      <!-- 分割线 -->
      <el-divider />

      <!-- 选择器功能 -->
      <div class="option">
        <div class="box1">
          <div class="box11">签约状态</div>
          <el-select v-model="value" class="m-2" placeholder="请选择" size="large">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>

        <div class="box1">
          <div class="box11">签约机构</div>
          <el-select v-model="value1" class="m-2" placeholder="请选择" size="large">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>

        <div class="box1">
          <div class="box11">医生选择</div>
          <el-select v-model="value2" class="m-2" placeholder="请选择" size="large">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>

        <!-- 按钮 -->
        <div class="box1">
          <el-row class="mb-4">
            <el-button @click="back" type="primary">新增居民档案</el-button>
          </el-row>
          <el-row class="mb-4">
            <el-button type="primary" plain>导出</el-button>
          </el-row>
        </div>
      </div>

      <div class="option1">
        <div class="box1">
          <div class="box11">服务包</div>
          <el-select v-model="val" class="m-2" placeholder="请选择" size="large">
            <el-option
              v-for="item in option"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>

        <div class="box1">
          <div class="box11">居民标签</div>
          <el-select v-model="value3" class="m-2" placeholder="请选择" size="large">
            <el-option
              v-for="item in option3"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>

        <!-- 搜索框 -->
        <div class="box2">
          <el-input
            v-model="input1"
            class="w-50 m-2"
            size="large"
            placeholder="输入关键字搜索"
            :suffix-icon="Search"
          />
        </div>
      </div>

      <!-- 表单 -->
      <div class="data">
        <el-table
          ref="multipleTableRef"
          :data="tableData"
          stripe
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column property="data" label="编号" width="120">
            <template #default="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column property="name" label="姓名" width="120" />
          <el-table-column property="lu" label="身份证" width="120" />
          <el-table-column property="call" label="手机号码" width="120" />
          <el-table-column property="ca" label="标签" width="120">
            <template #default>
              <el-tag
                v-for="item in items"
                :key="item.label"
                :type="item.type"
                class="mx-1"
                effect="light"
                round
              >
                {{ item.label }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column property="me" label="签约状态" width="120" />
          <el-table-column property="baby" label="操作" show-overflow-tooltip>
            <template #default>
              <el-button @click="gogo" size="small">查看</el-button>
              <el-button @click="csgo" size="small">编辑</el-button>
              <el-button @click="csol" size="small">添加服务</el-button>
              <el-button size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <div class="btn">
          <div class="demo-pagination-block">
            <el-pagination
              v-model:currentPage="currentPage4"
              v-model:page-size="pageSize4"
              :page-sizes="[10]"
              :small="small"
              :disabled="disabled"
              :background="background"
              layout="total, sizes, prev, pager, next, jumper"
              :total="tableData.length"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from "vue-router";
import { computed, ref } from "vue";
import { ElTable } from "element-plus";
// 按钮
import { Check, Delete, Edit, Message, Search, Star } from "@element-plus/icons-vue";
import type { TagProps } from "element-plus";
// 搜索框
// import { Search } from '@element-plus/icons-vue'

// 跳转至注册页面
const router = useRouter();
const back = () => {
  router.push("/he");
};
const gogo = () => {
  router.push("/pe");
};
const csgo = () => {
  router.push("/pei");
};
const csol = () => {
  router.push("/new-service");
};
// 选择框
// 签约状态
const value = ref("");
const options = [
  {
    value: "请选择",
    label: "请选择",
  },
  {
    value: "待签约",
    label: "待签约",
  },
  {
    value: "签约中",
    label: "签约中",
  },
  {
    value: "签约生效中",
    label: "签约生效中",
  },
  {
    value: "待续约",
    label: "待续约",
  },
];
// 签约机构
const value1 = ref("");
const options1 = [
  {
    value: "请选择",
    label: "",
  },
  {
    value: "罗西社区服务中心",
    label: "",
  },
  {
    value: "天明社区服务中心",
    label: "",
  },
  {
    value: "民进社区服务中心",
    label: "",
  },
];
// 医生团队
const value2 = ref("");
const options2 = [
  {
    value: "请选择",
    label: "",
  },
  {
    value: "王皓团队",
    label: "",
  },
  {
    value: "胡曼团队",
    label: "",
  },
  {
    value: "李维团队",
    label: "",
  },
];
// 服务包
const val = ref("");
const option = [
  {
    value: "请选择",
    label: "",
  },
  {
    value: "0-6岁儿童服务包",
    label: "",
  },
  {
    value: "老年人服务包",
    label: "",
  },
  {
    value: "慢性护理包",
    label: "",
  },
];

const value3 = ref("");
const option3 = [
  {
    value: "请选择",
    label: "",
  },
  {
    value: "慢病护理",
    label: "",
  },
  {
    value: "高血压",
    label: "",
  },
  {
    value: "高血糖  ",
    label: "",
  },
];

// 搜索框
const input1 = ref("");
const input2 = ref("");
const input3 = ref("");

// 标签
type Item = { type: TagProps["type"]; label: string };
const items = ref<Array<Item>>([
  { type: "", label: "高血压" },
  { type: "success", label: "高血糖" },
  { type: "danger", label: "冠心病" },
]);

// 表单

interface User {
  date: string;
  name: string;
  address: string;
}

const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<User[]>([]);
const toggleSelection = (rows?: User[]) => {
  if (rows) {
    rows.forEach((row) => {
      // TODO: improvement typing when refactor table
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      multipleTableRef.value!.toggleRowSelection(row, undefined);
    });
  } else {
    multipleTableRef.value!.clearSelection();
  }
};
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val;
};

const tableData: User[] = [
  {
    date: "2016-05-03",
    name: "Tom",
    lu: "123",
    call: "456",
    me: "签约中",
  },
  {
    date: "2016-05-03",
    name: "Tom",
    lu: "123",
    call: "456",
    me: "签约中",
  },
  {
    date: "2016-05-03",
    name: "Tom",
    lu: "123",
    call: "456",
    me: "签约中",
  },
  {
    date: "2016-05-03",
    name: "Tom",
    lu: "123",
    call: "456",
    me: "签约中",
  },
  {
    date: "2016-05-03",
    name: "Tom",
    lu: "123",
    call: "456",
    me: "签约中",
  },
  {
    date: "2016-05-03",
    name: "Tom",
    lu: "123",
    call: "456",
    me: "签约中",
  },
  {
    date: "2016-05-03",
    name: "Tom",
    lu: "123",
    call: "456",
    me: "签约中",
  },
  {
    date: "2016-05-03",
    name: "Tom",
    lu: "123",
    call: "456",
    me: "签约中",
  },
  {
    date: "2016-05-03",
    name: "Tom",
    lu: "123",
    call: "456",
    me: "签约中",
  },
  {
    date: "2016-05-03",
    name: "Tom",
    lu: "123",
    call: "456",
    me: "签约中",
  },
  {
    date: "2016-05-03",
    name: "Tom",
    lu: "123",
    call: "456",
    me: "签约中",
  },
];


// 分页器
const currentPage4 = ref(1)
const pageSize4 = ref(10)
const small = ref(false)
const background = ref(true)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
</script>
<style scoped>
#document {
  width: 100%;
  height: 100%;
  background-color: rgb(242, 247, 251);
}
.common {
  margin: 0 auto;
  width: 1150px;
  height: 100%;
  background-color: rgb(255, 255, 255);
}

#u423 {
  border-width: 0px;
  width: 6px;
  height: 20px;
  background: inherit;
  background-color: rgba(41, 132, 248, 1);
  border: none;
  border-radius: 8px;
  float: left;
  margin-left: 18px;
  margin-right: 18px;
}
.option {
  margin-top: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.box11 {
  font-size: 15px;
  line-height: 40px;
}

.box1 {
  height: 36px;
  display: flex;
  justify-content: space-between;
}

.option1 {
  height: 100px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.box2 {
  width: 485px;
}

.data {
  margin-top: 40px;
  width: 100%;
  height: 400px;
}

.btn {
  width: 100%;
  display: flex;
  justify-content: center;
}





.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
